<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义事件</title> 
    </head>
    <body>
        <div id = "app">
            <p>总数：{{ total }}</p>
            <my-component v-model="total"></my-component>
            <button @click="handleReduce">-1</button>
        </div>
        <script src = "../../vue.min.js"></script>
        <script>
            Vue.component('my-component',{
                props: ['value'],
                /*mark 为什么子组件没有显示*/
                // template: '<input type="text" :value="total" @input="updateValue">',
                template: '<input type="text" :value="value" @input="updateValue">',//这样可以显示
                // template: '<input type="text" v-bind:value="" @input="updateValue">',
                // template: '<input type="text" :value="">',
                // template: '<input type="text">',
                // template: '<button>按钮</button>',
                // mark 因为没有给：value赋值
                // template: '<div><input :value="" @input="updateValue"></div>',
                methods:{
                    updateValue:function (event) {
                        this.$emit('input',event.target.value)
                    }
                }
            });
            var app = new Vue({
                el: '#app',
                data:{
                    total:10
                },
                methods: {
                    handleReduce:function (total) {
                        this.total--;
                    }
                }
            })
        </script>
    </body>
</html>